<template>
    <div>

        <div style="margin-bottom:5px;">
            <el-input v-model="name" placeholder="请输入名字" style="width:200px;" @keyup.enter.native="loadPost"></el-input>
            
            <el-select v-model="roleId" filterable placeholder="角色" style="margin-left:5px;">
                <el-option
                    v-for="item in roleIds"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>

            <el-button type="primary" style="margin-left:5px;" @click="loadPost">查询</el-button>
            <el-button type="success" @click="resetParam">重置</el-button>
            <el-button type="primary" @click="add">新增</el-button>

        </div>
        <el-table :data="tableData"
            :header-cell-style="{background: '#f3f6fd',color:'#555'}">
            <!-- <el-table-column prop="id" label="ID" width="120">
            </el-table-column> -->
            <el-table-column prop="account" label="账号" width="200">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="200">
            </el-table-column>
            <el-table-column prop="birthday" label="出生日期" width="100">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="100">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.sex === 1 ? 'primary' : 'danger'"
                    disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="200">
            </el-table-column>
            <el-table-column prop="roleId" label="身份" width="200">
                <template slot-scope="scope">
                <el-tag
                    :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'primary' : (scope.row.roleId === 2 ? 'warning' : 'success'))"
                    disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' :
                                            (scope.row.roleId === 1 ? '管理人员' :
                                                (scope.row.roleId === 2 ? '医生' : '患者'))}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
                    <el-popconfirm title="确定删除" @confirm="del(scope.row.id)" style="margin-left:5px;">
                        <el-button slot="reference" size="small" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

        </el-pagination>
        
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                 <el-form-item label="账号" prop="account">   <!-- prop规则，对应rules -->
                    <el-col :span="20">
                        <el-input v-model="form.account"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-col :span="20">
                        <el-input v-model="form.password"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="出生日期" prop="birthday">
                    <el-col :span="20">
                        <el-date-picker v-model="form.birthday"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="身份" prop="roleId">
                    <el-radio-group v-model="form.roleId">
                        <el-radio label="1">管理人员</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import ApiService from '@/apiService';
export default {
    name: 'User',

    data() {
        let checkDuplicate = async (rule,value,callback)=>{
            if(this.form.id){
                return callback()
            }
            const response = await ApiService.get('/user/findByAc?account='+this.form.account);
            if(response.code!==200){
                callback();
            }else{
                callback(new Error('账户已经存在'));
            }

        };
        
        return {
            tableData: [],
            pageSize:5,
            pageNum:1,
            total:0,
            name:'',
            roleId:'',
            roleIds:[
                {value:'0',label:'超级管理员'},
                {value:'1',label:'管理人员'},
                {value:'2',label:'医生'},
                {value:'3',label:'患者'}
            ],
            centerDialogVisible:false,
            form:{
                id:'',
                account:'',
                name:'',
                password:'',
                birthday:'',
                sex:'0',
                phone:'',
                roleId:''
            },
            rules:{
                account:[
                    {required:true,message:'请输入账号',trigger:'blur'},
                    {min:3,max:20,message:'3-20',trigger:'blur'},
                    {validator: checkDuplicate,trigger:'blur'}
                ],
                name:[
                    {required:true,message:'请输入姓名',trigger:'blur'},
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'},
                    {min:3,max:12,message:'',trigger:'blur'}
                ]
            }

        }
    },

    methods:{
        add(){
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.resetForm() 
                this.form.id = ''})
        },

        mod(row){
            console.log(row)
            this.centerDialogVisible = true
            this.$nextTick(()=>{
                this.form.id = row.id
                this.form.account = row.account
                this.form.name = row.name
                this.form.password = ''
                this.form.birthday = row.birthday+''
                this.form.sex = row.sex+''
                this.form.phone = row.phone
                this.form.roleId = row.roleId+''
            })
        },

        async loadPost(){
            const response = await ApiService.post('/user/listPage', { //data
                pageSize:this.pageSize,
                pageNum:this.pageNum,
                param:{
                    name:this.name,
                    roleId:this.roleId
                }
            });
            console.log(response)
            this.tableData=response.data
            this.total=response.total
        },
        //  编辑/更新 功能
        async doMod(){
            const response = await ApiService.post('/user/update', this.form);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },

        async doSave(){
            const response = await ApiService.post('/user/save', this.form);

            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },
        async saveOrUpdate(){
            const response = await ApiService.post('/user/saveOrUpdate', this.form);

            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.centerDialogVisible = false
                this.loadPost()
            }else{
                this.$message({message:"失败",type:'error'})
            }
        },

        save(){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    //第一种区分新增和修改
                    if(this.form.id){
                        this.doMod();
                    }else{
                        this.doSave();
                    }
                    //第二种兼容新增和修改
                    // this.saveOrUpdate();
                }else{
                    console.log('error submit!!')
                    return false;
                }
            });

            
        },
        //删除功能
        async del(id){
            const response = await ApiService.get('/user/del?id='+id);
            if(response.code===200){
                this.$message({message:"成功",type:'success'})
                this.loadPost()
            }else{
                this.$message({message:response.msg,type:'error'})
            }
        },


        resetForm(){
            this.$refs.form.resetFields();
        },

        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageNum=1
        this.pageSize=val
        this.loadPost()
        },

        handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNum=val
        this.loadPost()
        },

        resetParam(){
            this.name='';
            this.roleId='';
        },

    },


    beforeMount(){
       // this.loadGet()
        this.loadPost()
    }
    

  
}
</script>


<style scoped>

</style>
